<style lang="less">

</style>
<template>
    <div>
        <Drawer :closable="false" placement="right" v-model="drawerVisible" width="50%" :title="drawerTitle">
            <Row>
                <Col>
                <Card :shadow="false">
                    <Row>
                        <Form ref="form" :model="form" :label-width="90" style="position:relative" :rules="formValidate">
                            <FormItem label="选项编码" prop="examOptionCode">
                                <Input v-model="form.examOptionCode"  style="width:600px" placeholder="输入选项编码如：A、B、C"/>
                            </FormItem>
                            <FormItem label="正确答案" prop="correct" >
                                <RadioGroup v-model="form.correct" >
                                    <Radio :label="1" >是</Radio>
                                    <Radio :label="0" >否</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="题目选项" prop="examOptionName">
                                <div ref="editor"></div>
                            </FormItem>
                            <Form-item label class="br">
                                <p style="color: red">建议上传图片大小不超400KB</p>
                                <Button @click="editHTML" icon="ios-create-outline">编辑HTML代码</Button>
                                <Button @click="fullscreenModal=true" icon="md-eye">预览</Button>
                            </Form-item>
                            <Form-item class="br" v-if="!disabledSingle">
                                <Button type="primary" :loading="submitLoading" @click="handelSubmit" style="width:80px">提交</Button>
                                <Button @click="handelCancel">取消</Button>
                            </Form-item>
                            <Spin size="large" fix v-if="loading"></Spin>
                        </Form>
                    </Row>
                </Card>
                </Col>
            </Row>
            <!-- html编辑 -->
            <Modal title="编辑html代码" v-model="showHTMLModal" :mask-closable="false" :width="900" :fullscreen="full">
                <Input v-if="!full" v-model="dataEdit" :autosize="true" type="textarea" style="max-height:60vh;overflow:auto"/>
                <Input v-if="full" v-model="dataEdit" :autosize="true" type="textarea"/>
                <div slot="footer">
                    <Button @click="full=!full" icon="md-expand">全屏开/关</Button>
                    <Button @click="editHTMLOk" type="primary" icon="md-checkmark-circle-outline">确定保存</Button>
                </div>
            </Modal>
            <Modal title="预览" v-model="fullscreenModal" fullscreen>
                <div v-html="form.examOptionName">{{form.examOptionName}}</div>
                <div slot="footer">
                    <Button @click="fullscreenModal=false">关闭</Button>
                </div>
            </Modal>
        </Drawer>
    </div>
</template>
<script>
    import E from "wangeditor";
    import {addAnswer, editAnswer} from "@/api/bus";
    import {uploadFile} from "@/api/index";
    import uploadInput from "@/views/my-components/flyme/upload-input";
    // 表情包配置 自定义表情可在该js文件中统一修改
    import {sina} from "@/libs/emoji";

    let editor = null;
    var xss = require("xss");
    export default {
        name: "answer-drawer",
        components: {
            uploadInput
        },
        data() {
            return {
                disabledSingle: false,
                picVisible: false,
                fileUrl: "",
                loading: false, // 表单加载状态
                drawerTitle: "答案",
                drawerVisible: false,
                form: {
                    id: '',
                    examOptionName: '',
                    examOptionCode: '',
                    correct: 0,
                    examId: ''
                },
                submitLoading: false, // 添加或编辑提交状态
                formValidate: {
                    examOptionName: [{required: true, message: "题目选项不能为空", trigger: "blur"}],
                    examOptionCode: [{required: true, message: "选项编码不能为空", trigger: "blur"}]
                },
                dataEdit: '',
                showHTMLModal: false, // 显示html
                full: false, // html全屏开关
                fullscreenModal: false// 显示全屏预览
            };
        },
        methods: {
            showDrawer(params) {
                if(params.id){
                    this.form.id = params.id
                    this.form.examOptionName = params.examOptionName
                    this.form.examOptionCode = params.examOptionCode
                    this.form.correct = params.correct
                    this.form.examId = params.examId
                    editor.txt.html(params.examOptionName);
                }else{
                    this.form.id = ''
                    this.form.examOptionName = ''
                    this.form.examOptionCode = ''
                    this.form.correct = 0
                    this.form.examId = params.examId
                    editor.txt.html('');
                }
                this.drawerVisible = true;
            },
            initEditor() {
                let that = this;
                editor = new E(this.$refs.editor);
                editor.customConfig.onchange = html => {
                    this.form.examOptionName = html;
                };
                editor.customConfig.uploadImgServer = uploadFile;
                editor.customConfig.uploadImgHeaders = {
                    Authorization: that.getStore("accessToken")
                };
                editor.customConfig.uploadFileName = "file";
                editor.customConfig.uploadImgHooks = {
                    before: function (xhr, editor, files) {
                    },
                    success: function (xhr, editor, result) {
                    },
                    fail: function (xhr, editor, result) {
                        that.$Message.error("上传图片失败");
                    },
                    error: function (xhr, editor) {
                        that.$Message.error("上传图片出错");
                    },
                    timeout: function (xhr, editor) {
                        that.$Message.error("上传图片超时");
                    },
                    customInsert: function (insertImg, result, editor) {
                        if (result.status === true) {
                            let url = result.data.fileUrl;
                            insertImg(url);
                            that.$Message.success("上传图片成功");
                        } else {
                            that.$Message.error(result.info);
                        }
                    }
                };
                editor.customConfig.fontNames = ["微软雅黑", "宋体", "黑体", "Arial"];
                editor.customConfig.emotions = [
                    {
                        title: "新浪",
                        type: "image",
                        content: sina
                    }
                ];
                editor.create();
            },
            editHTML() {
                this.dataEdit = this.form.examOptionName;
                this.showHTMLModal = true;
            },
            editHTMLOk() {
                editor.txt.html(this.dataEdit);
                this.form.examOptionName = xss(this.dataEdit);
                this.showHTMLModal = false;
            },
            handelSubmit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        if(this.form.id){
                            editAnswer(this.form).then(res => {
                                this.submitLoading = false;
                                if (res.status === true) {
                                    this.$Message.success("操作成功");
                                    this.$parent.getDataList();
                                    this.drawerVisible = false;
                                }
                            });
                        }else{
                            addAnswer(this.form).then(res => {
                                this.submitLoading = false;
                                if (res.status === true) {
                                    this.$Message.success("操作成功");
                                    this.$parent.getDataList();
                                    this.drawerVisible = false;
                                }
                            });
                        }

                    }
                });
            },
            handelCancel() {
                this.drawerVisible = false;
            }
        },
        mounted() {
            this.initEditor();
        },
        watch: {

        }
    };
</script>